
  
  <template>
  <div class="pageScroll">
    <el-card>
      <template #header>
        <div class="card-header flex">
          <div class="flex1">生态任务分类与积分</div>
          <el-button type="primary" @click="toEditPage()">
            新增任务分类
          </el-button>
        </div>
      </template>

      <el-table :data="list" :loading="loading">
        <el-table-column label="序号" align="center" prop="_index" />
        <el-table-column label="任务类型" align="center" prop="name">
        </el-table-column>
        <el-table-column
          width="160px"
          label="任务图标1(选中状态)"
          align="center"
          prop="iconUrl"
        >
          <template #default="scope">
            <el-image :src="scope.row.iconUrl" />
          </template>
        </el-table-column>
        <el-table-column
          width="170px"
          label="任务图标2(未选中状态)"
          align="center"
          prop="iconUrlC"
        >
          <template #default="scope">
            <el-image :src="scope.row.iconUrlC" />
          </template>
        </el-table-column>
        <el-table-column label="生态积分" align="center" prop="integral">
        </el-table-column>

        <el-table-column label="创建人" align="center" prop="createByName">
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="180px"
          align="center"
          prop="createTime"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="120px"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="toEditPage(scope.row.id)"
              v-hasPermi="['infra:config:update']"
            >
              编辑
            </el-button>
            <el-button
              link
              type="danger"
              @click="handleDelete({ id: scope.row.id })"
              v-hasPermi="['infra:config:delete']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination :="pagination" class="padding10" />
    </el-card>
  </div>
</template>
  
<script setup lang="ts">
import API from '@/api/api';
import { useTablePage } from '@/hooks/useTablePage';
const router = useRouter();
const {
  queryParams,
  queryFormRef,
  loading,
  list,
  handleQuery,
  resetQuery,
  handleDelete,
  pagination,
} = useTablePage({
  queryApi: API.classificationController.list,
  deleteApi: API.classificationController.delete,
});

function toEditPage(id?: number) {
  router.push({
    name: 'editEcology',
    query: {
      id,
    },
  });
}
function getClassificationName(list: any[]) {
  return (
    list
      ?.map?.(item => {
        return item.name;
      })
      .join('、') || ''
  );
}
</script>